<template>
	<view class="container">
		<!-- F1：一楼搜索框 -->
		<view class="f1">
			<uni-search-bar class="search" bgColor="#FFD698" radius="100" clearButton="auto" placeholder="搜索歌曲/专辑">
			</uni-search-bar>
			<image class="f1img" src="/static/img/discover/yinYue.png" mode="widthFix"></image>
			<image class="f1img" src="/static/img/discover/yinYue2.png" mode="widthFix"></image>
		</view>
		<!-- F2：二楼功能键 -->
		<view class="f2">
			<view class="f2_1">
				<image class="imgBG" src="../../static/img/discover/MaiKe.png" mode="widthFix"></image>
				<text>演唱</text>
			</view>
			<view class="f2_1 f2_2">
				<image class="imgBG1" src="../../static/img/discover/FaXian.png" mode="widthFix"></image>
				<text>发现</text>
			</view>
			<view class="f2_1 f2_3">
				<image class="imgBG1" src="../../static/img/discover/shouCang.png" mode="widthFix"></image>
				<text>曲库</text>
			</view>
			<view class="f2_1 f2_4">
				<image class="imgBG1" src="../../static/img/discover/shiPin.png" mode="widthFix"></image>
				<text>视频</text>
			</view>
		</view>
		<!-- F3：三楼卡片 -->
		<view class="f3">
			<view class="card">
				<view class="text">
					<text class="text1">主播歌曲</text>
					<text class="text2">寻找主播声音</text>
				</view>
				<image src="../../static/img/discover/boFang.png" mode="widthFix"></image>
			</view>
			<view class="card card2">
				<view class="text">
					<text class="text1">最新专辑</text>
					<text class="text2">最新发布出行</text>
				</view>
				<image src="../../static/img/discover/boFang.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- F4：切换项 -->
		<view class="f4">
			<view :class="{selected:select==0}" @click="select=0">歌友</view>
			<view :class="{selected:select==1}" @click="select=1">直播</view>
			<view :class="{selected:select==2}" @click="select=2">附近</view>
		</view>
		<discoverCard></discoverCard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:0
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container {
		.f1 {
			flex-direction: row;
			background-color: #FFC05F;
			padding-bottom: $uni-spacing-col-base;

			.search {
				flex: 1;
			}

			.f1img {
				width: $uni-img-size-base;
				margin: $uni-spacing-col-lg*1.3 $uni-spacing-row-base 0;
			}
		}

		.f2 {
			flex-direction: row;
			justify-content: space-evenly;

			text {
				font-weight: bold;
				color: $uni-text-color-placeholder;
				transform: translateY($uni-spacing-col-lg*2) scale(1.1);
			}

			.f2_1 {
				width: 25%;
				background: url('../../static/img/discover/bg1.png') no-repeat center;
				background-size: 60% 70%;
				margin-top: $uni-spacing-col-base;
				align-items: center;

				&.f2_2 {
					background: url('../../static/img/discover/bg2.png') no-repeat center;
					background-size: 60% 70%;
				}

				&.f2_3 {
					background: url('../../static/img/discover/bg3.png') no-repeat center;
					background-size: 60% 70%;
				}

				&.f2_4 {
					background: url('../../static/img/discover/bg4.png') no-repeat center;
					background-size: 60% 70%;
				}
			}
		}
	
		.f3 {
			margin-top: $uni-spacing-col-lg*4;
			flex-direction: row;
			justify-content: space-evenly;
		
			.card {
				background: url('../../static/img/discover/bgL.png');
				width: 45%;
				border-radius: $uni-border-radius-lg;
				flex-direction: row;
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				align-items: center;
		
				.text {
					flex: 1;
		
					.text1 {
						color: white;
						font-size: $uni-font-size-lg;
						margin-bottom: $uni-spacing-col-base;
					}
		
					.text2 {
						color: white;
						font-size: $uni-font-size-base;
					}
				}
		
				image {
					width: 25px;
				}
		
				&.card2 {
					background: url('../../static/img/discover/bgR.png');
				}
			}
		}
	
		.f4{
			flex-direction: row;
			view{
				margin: $uni-spacing-col-lg*2 $uni-spacing-row-base $uni-spacing-col-lg;
				padding-bottom: $uni-spacing-col-lg;
				color: $uni-text-color-grey;
				line-height: 100%;
				&.selected{
					color: black;
					font-size: $uni-font-size-sm*1.5;
					font-weight: bold;
					background-image: url('../../static/img/discover/xiaBiao.png');
					background-repeat: no-repeat;
					background-size: 80%;
					background-position: 3px 90%;
				}
			}
		}
	
	}





	.imgBG {
		margin: $uni-spacing-col-base;
		margin-top: $uni-spacing-col-lg*2;
		width: 23px;
	}

	.imgBG1 {
		margin: $uni-spacing-col-base;
		margin-top: $uni-spacing-col-lg*2;
		width: 30px;
	}
</style>
